<template>
    <div class="index" id="index">
        <div class="banner"><img src="~images/banner.png" alt="banner"/></div>
        <div class="nav-box-beside-position" ref="nav">
            <div class="nav-box-beside" :class="[isOverNav && 'fixed-Nav']">
                <div class="nav">
                    <div class="nav-box">
                        <template v-for="i in nav">
                            <div :key="i.id" @click="chooseNav(i.id)" :class="['nav-item', navActive === i.id && 'nav-item-a']">
                                <div>{{i.name}}</div>
                            </div>
                        </template>
                    </div>
                    <div class="mouth-select" @click="toggleMouth" tabindex="-1" @blur="hideMouth">
                        <div class="curr-sel">{{ mouth }}</div>
                        <img src="~images/sel-arrow.png" alt="banner" :style="{transform: 'rotate(' +  (mouthToggle ? '180' : '0') + 'deg)'}"/>
                        <transition name="selList">
                            <div class="select-box" v-if="mouthToggle">
                                <div class="sel-inner-box">
                                    <div class="select-item" v-for="i in mouthData" :key="i.id" :class="[i.id === mouthId && 'active']" @click="chooseMouth(i)">{{i.name}}</div>
                                </div>
                            </div>
                        </transition>
                    </div>
                </div>
            </div>
        </div>
        <content-item v-for="(i, index) in allContent" :key="i.id" @showDetail="toggleDetail" :i="i" :index="index"/>
        <Bottom/>
        <Model :model-toggle="modelToggle" @closeModel="toggleDetail" :all-content="allContent" :curr-index="currIndex" @preview="preview"/>
    </div>
</template>

<script>
import ContentItem from './Content';
import Bottom from './Bottom';
import Model from './Model';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    name: 'Index',
    components: { ContentItem, Bottom, Model },
    data() {
        return {
            mouthToggle: false,
            mouthData: [
                { id: 1,  name: '2020年1月' },
                { id: 2,  name: '2020年2月' },
                { id: 3,  name: '2020年3月' },
                { id: 4,  name: '2020年4月' },
                { id: 5,  name: '2020年5月' },
                { id: 6,  name: '2020年6月' },
                { id: 7,  name: '2020年8月' },
                { id: 8,  name: '2020年8月' },
                { id: 9,  name: '2020年9月' },
                { id: 10,  name: '2020年10月' },
                { id: 11,  name: '2020年11月' },
                { id: 12,  name: '2020年12月' }
            ],
            nav: [
                { id: 1, name: '全部' },
                { id: 2, name: '网页端' },
                { id: 3, name: '移动端', type: 'mobile' },
                { id: 4, name: 'IBMS' },
                { id: 5, name: '其他' }
            ],
            navActive: 1,
            mouth: '2020年1月',
            mouthId: 1,
            modelToggle: false,
            allContent: [
                { id: 2, name: '网页端调整优化', type: 'pc' },
                { id: 3, name: '移动端调整优化', type: 'mobile' },
                { id: 4, name: '控件调整优化', type: 'component' },
            ],
            currIndex: 0,
            isOverNav: false
        };
    },
    computed: {
        // state
        count () {
            return this.$store.state.count;
        },
        ...mapState([
            'num'
        ]),
        ...mapState({
            countAlias: (state) => {
                return state.count + state.num;
            }
        }),
        ...mapState('global', {
            msg: (state) => state.exampleMsg
        }),
        // getters
        doneTodosCount () {
            return this.$store.getters.doneTodosCount;
        },
        ...mapGetters({
            doneCount: 'doneTodosCount'
        })
    },
    mounted() {
        console.log(this.$store.state.count);
        this.$store.commit('increment');
        this.$store.commit('increment', 50);
        console.log(this.$store.state.count);
        console.log(this.$store.getters.doneTodos);
        console.log(this.$store.getters.getTodoById(1));
        // this.nav.push(...this.allContent);
        this.$store.commit('setName', 'huwei1111');
        window.addEventListener('scroll', (e) => {
            // console.log(e);
            // console.log([this.$refs.nav.offsetTop]);
            // console.log(document.documentElement.scrollTop || document.body.scrollTop);
            const navTop = this.$refs.nav.offsetTop;
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > navTop && !this.isOverNav) {
                this.isOverNav = true;
            } else if (scrollTop <= navTop && this.isOverNav) {
                this.isOverNav = false;
            }
        }),
        this.increment(30);
        this.incrementA(1000);
        this.$store.dispatch('increment', 100);
        this.actionsA(11111);
    },
    methods: {
        ...mapMutations({
            increment: 'increment'
        }),
        ...mapActions({
            incrementA: 'increment'
        }),
        ...mapActions([
            'actionsA'
        ]),
        hideMouth() {
            this.mouthToggle = false;
        },
        toggleMouth(e) {
            this.mouthToggle = !this.mouthToggle;
            e.target.focus();
        },
        chooseNav(id) {
            this.navActive = id;
        },
        chooseMouth(i) {
            this.mouthId = i.id;
            this.mouth = i.name;
        },
        toggleDetail(index) {
            console.log(index);
            this.currIndex = index;
            this.modelToggle = !this.modelToggle;
            document.body.style.overflow = this.modelToggle ? 'hidden' : 'auto';
            this.$emit('modelShow', this.modelToggle);
        },
        preview (index) {
            this.currIndex = index;
        }
    }
};
</script>

<style scoped lang="less">
@keyframes identifier {
    from {
        height: 0;
    }
    to {
        height: 104px;
    }
}
.selList-enter-active{
  animation: identifier 0.2s;
}
.selList-leave-active{
  animation: identifier 0.2s reverse;
}

.index {
    .nav-box-beside-position{
        height: 78px;
        .fixed-Nav{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: #ffffff;
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
        }
        .nav-box-beside{
            .nav {
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 1200px;
                margin: 0 auto;
                padding-top: 30px;
                padding-bottom: 20px;
                .mouth-select{
                    width: 103px;
                    height: 28px;
                    border: 1px solid #C3C7CB;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    outline: none;
                    cursor: pointer;
                    .sel-inner-box{
                        height: 116px;
                        overflow-y: auto;
                        .select-item{
                            line-height: 29px;
                            padding-left: 15px;
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            color: #656565;
                            &:hover{
                                background-color: #F5F6F7;
                            }
                        }
                        .active{
                            background-color: #F5F6F7;
                        }
                    }
                    .select-box{
                        position: absolute;
                        left: -1px;
                        top: 30px;
                        width: 104px;
                        height: 128px;
                        background: #FFFFFF;
                        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
                        padding-top: 6px;
                        padding-bottom: 6px;
                    }
                    .curr-sel{
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC,serif;
                        color: #1F2529;
                        width: 78px;
                        white-space: nowrap;
                    }
                    >img{
                        width: 8px;
                        height: 4px;
                        transition: transform 0.3s;
                    }
                }
                &-box {
                    display: flex;
                    align-items: center;
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC, serif;
                    color: #1F2529;
                    line-height: 28px;
                    .nav-item {
                        width: 155px;
                        display: flex;

                        > div {
                            cursor: pointer;
                            transition: all 0.36s;
                        }
                    }

                    .nav-item-a {
                        > div {
                            color: #0091FF;
                            position: relative;

                            &:after {
                                content: '';
                                width: 10px;
                                height: 2px;
                                background: #0091FF;
                                position: absolute;
                                left: 50%;
                                margin-left: -5px;
                                bottom: 0
                            }
                        }
                    }
                }
            }
        }
    }
    .banner {
        //height: 600px;
        img {
            width: 100%;
            height: auto;
            padding: 0;
            margin: 0;
        }
    }
}
</style>
